<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">文章名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                                class="layui-icon"></i> 搜 索
                    </button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<!-- add -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm data-add-btn"> 添加文章</button>
        <button class="layui-btn layui-btn-warm layui-btn-sm data-publish-btn"> 发布文章</button>
    </div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>

<script>
    layui.use(['form', 'table'], function () {
        let $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        //执行一个 table 实例
        table.render({
            elem: '#currentTableId',
            defaultToolbar: ['filter',],
            toolbar: '#toolbarDemo',
            url: '/admin/api/blog/list', //数据接口
            page: true, //开启分页
            cols: [[ //表头
                {type: 'checkbox'},
                {field: 'id', title: 'ID'},
                {field: 'title', title: '文章名'},
                {field: 'views', title: '浏览量'},
                {
                    field: 'is_top', title: '是否置顶', width: 100, templet: function (d) {
                        check = "";
                        if (d.is_top === 1) {
                            check = "checked";
                        }
                        return '<input type="checkbox" name="is_top" data-id="' + d.id + '" value="' + d.is_show + '" lay-skin="switch" lay-text="置顶|未置顶" lay-filter="isShow" ' + check + ' >';
                    }, unresize: true
                },
                {title: '操作', toolbar: '#currentTableBar', fixed: 'right', width: 150},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            done: function () {
                //重新加载工具
                bindTableToolbarFunction()
            }
        });


        // ==================== 定义事件处理 ====================
        // 绑定事件集合处理(表格加载完毕和表格刷新的时候调用)
        function bindTableToolbarFunction() {
            // 监听添加操作
            $(".data-add-btn").on("click", function () {
                let index = layer.open({
                    title: '添加文章',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/admin/blog/create',
                    end: function () {
                        table.reload('currentTableId', {
                            page: {curr: 1}
                        }, 'data');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });

                return false;
            });

            $('.data-publish-btn').on('click', function () {
                $.ajax({
                    url: '/admin/api/blog/publish',
                    type: "POST",
                    data: {},
                    dataType: "json",
                    beforeSend: function () {
                        load = layer.load(2);
                    },
                    complete: function () {
                        layer.close(load)
                    },
                    success: function (data) {
                        if (data.code === 1) {
                            layer.msg(data.message)
                        } else {
                            layer.msg(data.message, {icon: 2, title: "error"})
                        }
                    }
                });
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: data.field
                }, 'data');
                return false;
            });
        }

        //工具操作
        table.on('tool(currentTableFilter)', function (obj) {
            let data = obj.data;
            if (obj.event === 'edit') {
                let index = layer.open({
                    title: '编辑分类',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/admin/blog/edit?id=' + data.id,
                    end: function () {
                        table.reload('currentTableId', {
                            page: {curr: 1}
                        }, 'data');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                let load;
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/admin/api/category/delete',
                        type: "POST",
                        data: {'id': data.id},
                        dataType: "json",
                        beforeSend: function () {
                            load = layer.load(2);
                        },
                        complete: function () {
                            layer.close(load)
                        },
                        success: function (data) {
                            if (data.code === 1) {
                                // 关闭弹出层
                                layer.msg(data.message, {icon: 1, title: "success"}, function () {
                                    let iframeIndex = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(iframeIndex);
                                });
                            } else {
                                layer.msg(data.message, {icon: 2, title: "error"})
                            }
                        }
                    });
                    table.reload('currentTableId', {
                        page: {curr: 1}
                    }, 'data');
                    layer.close(index);
                });
            }
        });
    });


</script>